// 1.引入 Vue
import Vue from "vue";

// 2.引入 VueRouter
import VueRouter from "vue-router";

// 引入公共组件（我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件）
const Details = () => import("@/components/Details");

// 5.引入路由组件
const About = () => import("@/pages/About");
const Home = () => import("@/pages/Home");

const Messages = () => import("@/pages/Home/Messages");
const News = () => import("@/pages/Home/News");

// 3.注册路由插件
Vue.use(VueRouter);

// 4.创建路由映射表
const routes = [
  { path: "/about", component: About },
  {
    path: "/home",
    component: Home,
    children: [
      { path: "news", component: News },
      {
        path: "messages",
        component: Messages,
        children: [
          {
            path: "details",
            component: Details, 
            // 第一种写法（布尔值）
            // props:true

            // 第二种写法（对象）
            /* props:{
                id:'4567890-98tre45rty8u9i0-98765467890-',
                title:'rtdfyguhiljo;iufdy546fugihojk;piuthry',
                a:100,
                b:200,
                c:[2,4,6,8,10]
            } */

            // 第三种写法（函数：参数就是 $route）
            props({query: {id, title}}) {
              return {id, title}
            },
          },
        ],
      },
      // 默认子路由（地址上不会显示该路由的路径，也就是 path）
      { path: "", component: News },
    ],
  },
  // 路由重定向
  { path: "/", redirect: "/about" },
  // 默认子路由（地址上不会显示该路由的路径，也就是 path）
  // { path: "", component: About },
];

// 6.创建路由实例并暴露
export default new VueRouter({
  // 默认 hash 模式 location.pushState
  mode: "history", // 地址中没有 # 更优雅
  routes,
});
